<template>
  <div class="full-page-5">
    <el-image :src="useAssets('images/png/bg41.png')" fit="cover" class="absolute bottom-28 lg:left-1/4  lg:bottom-10" :class="{'enter':active,'leave':!active}"></el-image>
    <el-image :src="useAssets('images/png/bg42.png')" fit="cover" class="absolute  bottom-10 lg:left-1/4 lg:bottom-0"  :class="{'enter':active,'leave':!active}"></el-image>
    <el-image :src="useAssets('images/png/bg42.png')" fit="cover"  class="absolute w-28  right-6 top-6 lg:w-44 lg:right-1/3 lg:top-24" :class="{'enter':active,'leave':!active}" ></el-image>
    <div class="full-page-5-intro  pl-6 mt-8 lg:ml-96">
      <div  class="c-f-colum el-col" :class="{'enter':active,'leave':!active}">
        <h2 class="text-blue-400 text-base font-bold pb-2 lg:text-2xl">[ {{ t('page5.title.c2') }} ]</h2>
        <p class="text-gray-500 text-xs lg:text-xl" >
          <span>{{ t('page5.item2.c1.k') }}:</span>  {{ t('page5.item2.c1.v') }}<br>
          <span>{{ t('page5.item2.c2.k') }}：</span> {{ t('page5.item2.c2.v') }}<br>
          <span>{{ t('page5.item2.c3.k') }}：</span> {{ t('page5.item2.c3.v') }}<br>
          <span>{{ t('page5.item2.c4.k') }}：</span> xx@qq.com<br>
          <span>{{ t('page5.item2.c5.k') }}：</span> {{ t('page5.item2.c5.v') }}<br>
          <span>{{ t('page5.item2.c6.k') }}：</span> {{ t('page5.item2.c6.v') }}<br>
          <span>{{ t('page5.item2.c7.k') }}：</span> {{ t('page5.item2.c7.v') }}<br>
        </p>
      </div>
      <div  :class="{'enter':active,'leave':!active}">
        <h2 class="text-blue-400 text-base font-bold py-4 lg:text-2xl">[ {{ t('page5.title.c3') }} ]</h2>
        <div class="h-32">
          <el-steps  direction="vertical" :active="2">
            <el-step :title="titles[0]" :description="titles[1]" ></el-step>
            <el-step :title="titles[2]"  :description="titles[3]"></el-step>
          </el-steps>
        </div>
      </div>
    </div>
    <el-image  :src="useAssets('images/png/section6.jpg')" fit="cover" class="bg-image" lazy></el-image>
  </div>
</template>
<script setup name="fullPage5">
import { useAssets } from '@/utils';

const props = defineProps({
  index: {
    type: Number,
    default: 0
  }
});
const { t } = useI18n();
const active = computed(() => props.index === 4);

const titles = ref([
  t('page5.item3.c1'),
  t('page5.item3.c2'),
  t('page5.item3.c3'),
  t('page5.item3.c4'),
]);

</script>
<style lang="scss" scoped>
:deep(.el-step__description ){
  @apply text-gray-500;
}
.full-page-5-intro {
  &>div:nth-child(1) {
    &.enter{
      animation: rollIn 1.5s  forwards;
    }
    &.leave{
      animation: rotateOut .8s  forwards;
    }
  }
  &>div:nth-child(2) {
    &.enter{
      animation: flipInX 2s  forwards;
    }
    &.leave{
      animation: flipOutY .8s  forwards;
    }
  }
}
.el-image {
  &:nth-of-type(1){
    &.enter{
      animation: fadeInUp  5s  forwards;
    }
    &.leave{
      animation: fadeOutDown  1s  forwards;
    }
  }
  &:nth-of-type(2){
    &.enter{
      animation: fadeInUp  3s  forwards;
    }
    &.leave{
      animation: fadeOutDown  1s  forwards;
    }
  }
  &:nth-of-type(3){
    &.enter{
      animation: fadeInRight  2s  forwards;
    }
    &.leave{
      animation: fadeOutRight  1s  forwards;
    }
  }
}
</style>
